import React,{ Component } from 'react';
import { subscribeToTimer } from './connectChatRoom';
import './messageCont.scss';
import '../index/index.scss';
import Time from '@/components/index/radar/time/time.jsx';
import { sendMessage, getMessageList, getChatRoom, getChannel} from '@/api/message'
export default class MessageCont extends Component{
	constructor (props) {
		super(props)
		this.state={
			time: '2018年06月15日  19:20',
			valueData: '',
			roomId: '',
			dataList: [],
			sendMessage: '',
		}
	}
	changeMessage (e) {
		this.setState({
			sendMessage: e.target.value
		})
	}
	componentDidMount () {
		document.title = this.props.location.state.nickname || '客戶';
		// let that = this
		getChannel().then(res => {
			subscribeToTimer(res.data.channel, (err, res) => {
				return this.setState({
					dataList: [...this.state.dataList, {
						msg: res.msg,
						avatar: res.avatar,
						time: res.time,
						sender: res.sender
					}]
				}, () => {
					document.documentElement.scrollTop = this.refs.myScrollTop.clientHeight
				})
			})
		})
		if (this.props.location.state.roomId) {
			getMessageList({
				chat_room: this.props.location.state.roomId,
				start_index: 0,
				page_size: 15
			}).then(res => {
				this.setState({
					dataList: res.data,
					roomId: this.props.location.state.roomId
				})
			})
		} else {
			getChatRoom({account_user_id: this.props.location.state.account_user_id}).then(res => {
				this.setState({
					roomId: res.data.chat_room
				}, () => {
					getMessageList({
						chat_room: res.data.chat_room,
						start_index: 0,
						page_size: 15
					}).then(res => {
						this.setState({
							dataList: res.data
						})
					})
				})
			})
		}
	}
	sendMessageWord () {
		sendMessage({
			chat_room: this.state.roomId,
			msg: this.state.sendMessage
		}).then(res => {
			if (res.code === 1) {
				this.setState({
					dataList: [...this.state.dataList, {
						msg: res.data.msg,
						avatar: res.data.avatar,
						time: res.data.time,
						sender: res.data.sender
					}],
					sendMessage: ''
				}, () => {
					document.documentElement.scrollTop = this.refs.myScrollTop.clientHeight
				})
			}
		})
	}
	goBack () { //返回上一级
		this.props.history.goBack()
	}
	render(){
		return(
			<div className="messageCont" ref='ohterScroll'>
				{/*<div className="title">
					<div onClick={this.goBack.bind(this)}><i className="glyphicon glyphicon-left"></i></div>
					<div>{this.props.location.state.nickname || '客戶'}</div>
					<div><i className="glyphicon glyphicon-options"></i></div>
				</div>*/}
				<div className="messageCont_content" ref='myScrollTop'>
					<Time time={this.state.time}/>
					{
						this.state.dataList.map((item, index) => {
							return (
								<div className="messageCont_list" key={index}>
									<div>
										<img className={item.sender === 2 ? 'messageCont_img' : 'messageCont_img hidden'} src={item.avatar} alt="lalal"/>
									</div>
									<div className="messageCont_left">
										<p className="messageCont_text">{item.msg}</p>
									</div>
									<div>
										<img className={item.sender === 1 ? 'messageCont_img' : 'messageCont_img hidden'} src={item.avatar} alt="lalal"/>
									</div>
								</div>
							)
						})
					}
				</div>
				<div className='input-group' >
					<input placeholder='请输入你想对我说的话~' value={this.state.sendMessage} onChange={this.changeMessage.bind(this)} />
					<div className='sendMessage' onClick={this.sendMessageWord.bind(this)}>
						发送
					</div>
				</div>
			</div>
		)
	}
}
